<template>
	<view class="unitDetails">
		<view class="unitDetailsTop">
			<view class="unitDetailsTitel">
				<view class="unitTop">{{basicInfor.name}}</view>
				<view class="uniBot">
					<image src="../../static/images/d1.png" class="checktt" style="margin-right: 8rpx;">
					</image>
					<view>{{basicInfor.address}}</view>
				</view>
			</view>
		</view>
		<view class="tabInfo">
			<view class="search-item" :class='{active: activeindex === ""}' @click="handlertab('')">
				基本信息</view>
			<view class="search-item" :class='{active: activeindex === 1}' @click="handlertab(1)">
				安全诊断</view>
			<view class="search-item" :class='{active: activeindex === 2}' @click="handlertab(2)">
				检查记录</view>
		</view>
		<!-- 基本信息 -->
		<view class="basicInfo" v-if="activeindex==''">
			<view class="basicInfoMiddel">
				<view class="informationTitle">
					<view class="left">
						<image src="../../static/images/ce0.png" class="leftImg"></image>
						基本信息
					</view>
				</view>
				<view class="basicList">
					<view class="basicItem">社会信用:</view>
					<view class="basicItem">{{basicInfor.unifiedSocialCreditCode}}</view>
				</view>
				<view class="basicList">
					<view class="basicItem">所在区县:</view>
					<view class="basicItem">{{basicInfor.areaName}}</view>
				</view>
				<view class="basicList">
					<view class="basicItem">单位类型:</view>
					<view class="basicItem">{{basicInfor.institutionType}}</view>
				</view>
				<view class="basicList">
					<view class="basicItem">单位级别:</view>
					<view class="basicItem">{{basicInfor.levelName}}</view>
				</view>
				<view class="basicList">
					<view class="basicItem">所属行业:</view>
					<view class="basicItem">{{basicInfor.unifiedSocialCreditCode}}</view>
				</view>
				<view class="basicList">
					<view class="basicItem">所属派出所:</view>
					<view class="basicItem">{{basicInfor.industryName}}</view>
				</view>
				<view class="basicList">
					<view class="basicItem">责任人:</view>
					<view class="basicItem">{{basicInfor.leader+'--'+basicInfor.leaderPhone}}</view>
				</view>
				<view class="basicList">
					<view class="basicItem">更新时间:</view>
					<view class="basicItem">{{basicInfor.updateTime}}</view>
				</view>
			</view>
		</view>
		<!-- 安全诊断 -->
		<view class="safeInfo" v-if="activeindex==1">
			<view class="safeInfoMiddel">
				<view class="informationTitle">
					<view class="left">
						<image src="../../static/images/ce1.png" class="leftImg"></image>
						安全诊断
					</view>
				</view>
				<view class="safeInfoDetail">
					<view class="safeInfoDetailleft">
						<view class="safeCount">
							<view class="number">{{checkCountdata.avgg}}</view>
							<view class="text">安全指数</view>
						</view>
					</view>
					<view class="safeInfoDetailright">
						<view class="title">安全诊断:</view>
						<view class="textTitle"> 根据最近3年检查情况，检查综合评分为 <text
								style="color: #ff0000;">{{checkCountdata.avgg}}</text>分，被纳入<text
								style="color: orange;">橙色</text>目标名单！</view>
						<view class="bottom">
							<view class="bottomItem">
								<view class="right">
									<image src="../../static/images/city.png" class="riimg"></image>
									<view class="rightInfo">
										<text class="cityRanking">全市排名</text>
										<text class="rightNumber">{{checkCountdata.cityOrderNum}}</text>
									</view>
								</view>
								<view class="right">
									<image src="../../static/images/insty.png" class="riimg"></image>
									<view class="rightInfo">
										<text class="cityRanking">行业排名</text>
										<text class="rightNumber">{{checkCountdata.industryOrderNum}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 安全诊断 -->
		<view class="inspectionRecord" v-if="activeindex==2">
			<view class="informationTitle" style="width: 92%;margin: auto;">
				<view class="left">
					<image src="../../static/images/ce2.png" class="leftImg"></image>
					基本信息
				</view>
			</view>
			<view class="inspectionRecordCard">
				<template v-if="checkdataList.length>0">
					<view class="table-item" v-for="(item,index) in checkdataList" :key="index"
						@click="handlerdetail(item)">
						<view class="item-title">
							<text class="titletext">{{item.checkDate}}</text>
							<view :class="'item-tab' + item.checkStatus ">
								{{item.checkStatusName}}
							</view>
						</view>
						<view class="todoList">
							<image src="../../static/images/tr2.png" class="htitle"></image>
							<view>检查单位：</view> <text class="content-text">{{item.policeStationName}}</text>
						</view>
						<view class="todoList">
							<image src="../../static/images/tr1.png" class="htitle"></image>
							<view>不达标事项：</view> <text class="content-text"><text
									style="color: #ff0000;">{{item.notStandard}}</text>项/<text
									style="color: #30c2ff;">{{item.allStandard}}</text>项</text>

						</view>

					</view>
				</template>
				<u-empty v-else text="暂无数据" iconColor="#47b3f8" textColor="#85878B" mode="data"></u-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		getinstitutiondetail,
		getCheckCount,
		getcheckRecordList
	} from "@/api/unitsList.js"
	let activeindex = ref('')

	//切换tab
	const handlertab = (index) => {
		activeindex.value = index
		// getcheckList();
	}
	const checkdataList = ref([])
	const basicInfor = ref({})
	onLoad((option) => {
		institutionInfolist(option.institutionId)
		checkCount(option.institutionId)
		inspectionrecord(option.institutionId)
	})
	const institutionInfolist = async (institutionId) => {
		const res = await getinstitutiondetail(institutionId)
		if (res.code == 200) {
			basicInfor.value = res.data
		}
	}
	const checkCountdata = ref({})
	const checkCount = async (institutionId) => {
		const res = await getCheckCount({
			institutionId
		})
		if (res.code == 200) {
			checkCountdata.value = res.data
		}
	}
	const submitDate = ref({
		pageNum: 1, //页数
		pageSize: 5 //每页条数
	})
	const total = ref(0) //数据总条数
	const inspectionrecord = async (institutionId) => {
		const res = await getcheckRecordList({
			pageNum: submitDate.value.pageNum,
			pageSize: 50
		}, {
			institutionId
		})
		if (res.code == 200) {
			checkdataList.value = res.rows
			total.value = res.total
		}
	}
	//处理详情
	const handlerdetail = (item) => {
		const params = JSON.stringify(item);
		uni.navigateTo({
			url: `/pages/checkdetail/checkdetail?params=${params}`,

		});
	}
</script>

<style lang="scss" scoped>
	.unitDetails {
		width: 100%;
		height: 100vh;
		background-color: #FAFAFA;
		overflow: hidden;

		.unitDetailsTop {
			width: 100%;
			// height: 18vh;
			display: flex;
			justify-content: center;
			align-items: center;
			// border: 1px solid red;
			margin-top: 20rpx;
			margin-bottom: 20rpx;

			.unitDetailsTitel {
				width: 84%;
				// height: 11vh;
				padding: 2% 4%;
				background-color: rgba(255, 255, 255, 0.9);
				box-shadow: 0rpx 30rpx 30rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 18rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 18rpx;

				.unitTop {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					line-height: 70rpx;
				}

				.uniBot {
					font-family: PingFang SC;
					font-size: 28rpx;
					color: #333333;
					line-height: 60rpx;
					display: flex;
				}

				.checktt {
					width: 40rpx;
					height: 32rpx;
					margin-top: 17rpx;
				}
			}
		}

		.tabInfo {
			width: 92%;
			height: 5.6vh;
			margin: auto;
			// border: 1px solid red;
			display: flex;
			justify-content: space-between;
			margin-bottom: 22rpx;

			.search-item {
				width: 30%;
				background: #BFD4E8;
				border-radius: 6rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333333;
				font-size: 28rpx;
			}

			.active {
				background: linear-gradient(-90deg, #00C2D3, #00A7FF);
				color: #FFFFFF;
			}
		}

		.inspectionRecord {
			width: 92%;

			margin: auto;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			box-shadow: 0px 20rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			border: 2rpx solid #FFFFFF;
			overflow: hidden;

			.inspectionRecordCard {
				height: 62vh;
				overflow-y: auto;

				// border: 1px solid red;
				:deep(.u-icon__icon) {
					top: 100rpx !important;
				}

				:deep(.u-empty__text) {
					margin-top: 140rpx;
				}

				.table-item {
					padding: 20rpx 26rpx;
					font-size: 24rpx;
					border-radius: 20rpx;
					margin-top: 20rpx;
					background-color: #ffffff;
					box-shadow: 0px 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);


					.item-title {
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #eeeeee;
						padding-bottom: 20rpx;
						margin-bottom: 12rpx;

						.titletext {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.item-tab0 {
							background-color: #c5defb;
							color: #5e9efd;
							padding: 3rpx 16rpx;
							border-radius: 20rpx;
						}

						.item-tab1 {
							background-color: #c5defb;
							color: #5e9efd;
							padding: 3rpx 16rpx;
							border-radius: 20rpx;
						}

						.item-tab2 {
							background-color: #c5defb;
							color: #5e9efd;
							padding: 3rpx 16rpx;
							border-radius: 20rpx;

						}

					}

					.todoList {
						width: 100%;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #666666;
						line-height: 50rpx;

						.content-text {
							color: #333333;
						}

						.htitle {
							width: 31rpx;
							height: 35rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.safeInfo {
			width: 92%;
			height: 44vh;
			margin: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 20rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			border: 2rpx solid #FFFFFF;

			.safeInfoMiddel {
				width: 93%;
				height: 86%;
				// border: 1px solid blue;
				font-family: PingFang SC;
				font-size: 30rpx;
				color: #333333;

				.safeInfoDetail {
					width: 100%;
					height: 84%;
					background: url('@/static/images/bb1.png') no-repeat;
					background-size: 100%;
					background-position: center;
					display: flex;
					justify-content: center;
					align-items: center;

					.safeInfoDetailleft {
						width: 280rpx;
						height: 315rpx;
						// border: 1px solid red;
						background: url('@/static/images/indexd.png') no-repeat;
						background-size: 100%;
						position: relative;

						.safeCount {
							width: 100%;
							text-align: center;
							display: flex;
							flex-wrap: wrap;
							position: absolute;
							top: 22%;

							.number {
								width: 100%;
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 38rpx;
								color: #FFFFFF;
								line-height: 66rpx;
							}

							.text {
								width: 100%;
								font-family: PingFang SC;
								font-size: 19rpx;
								color: #FFFFFF;
								line-height: 0rpx;
							}
						}
					}

					.safeInfoDetailright {
						width: 46%;
						height: 70%;
						// border: 1px solid yellow;
						margin-left: 16rpx;

						.title {
							font-family: PingFang SC;

							font-size: 24rpx;
							color: #FFFFFF;
							text-decoration-line: underline;
						}

						.textTitle {
							font-family: PingFang SC;
							text-indent: 50rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-top: 20rpx;
						}

						.bottomItem {
							width: 100%;
							height: 6vh;
							// border: 1px solid red;
							display: flex;
							justify-content: space-between;
							margin-top: 30rpx;

							.right {
								width: 46%;
								height: 100%;

								display: flex;
								align-items: center;

								.riimg {
									width: 54rpx;
									height: 44rpx;
								}

								.rightInfo {

									display: flex;
									flex-wrap: wrap;
									justify-content: center;

									.cityRanking {

										font-family: PingFang SC;
										font-weight: 400;
										font-size: 22rpx;
										color: #F7F7F7;
									}

									.rightNumber {

										font-family: PingFang SC;
										font-weight: bold;
										font-size: 30rpx;
										color: #F7F7F7;

									}
								}
							}
						}
					}
				}
			}
		}

		.basicInfo {
			width: 92%;
			height: 60vh;
			margin: auto;
			// border: 1px solid red;
			display: flex;
			justify-content: center;
			// align-items: center;
			box-shadow: 0px 20rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			border: 2rpx solid #FFFFFF;

			.basicInfoMiddel {
				width: 91%;
				height: 90%;
				// border: 1px solid blue;
				font-family: PingFang SC;
				font-size: 30rpx;
				color: #333333;
				line-height: 70rpx;

				.basicList {
					width: 100%;
					display: flex;
					justify-content: space-between;
					border-bottom: 2rpx solid rgba(80, 145, 253, 0.5);
					font-size: 28rpx;
					color: #333333;

					.basicItem {}
				}


			}

		}

		.informationTitle {
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: auto;
			background-color: #FAFAFA;

			.left {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				line-height: 137rpx;

				.leftImg {
					width: 60rpx;
					height: 60rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>